Brány kvality kódu v JavaScriptu: Zvládnutí konfigurace pre-commit hooků

V neustále se vyvíjejícím světě softwarového vývoje je udržování vysoké kvality kódu prvořadé. Čistý, dobře naformátovaný a bezchybný kód nejen snižuje náklady na údržbu, ale také podporuje spolupráci a zrychluje vývojové cykly. Jednou z mocných technik pro vynucování kvality kódu je implementace bran kvality kódu pomocí pre-commit hooků. Tento článek poskytuje komplexního průvodce konfigurací pre-commit hooků pro JavaScriptové projekty, což vám umožní automatizovat kontroly kvality kódu ještě předtím, než se kód vůbec dostane do vašeho repozitáře.

Co jsou pre-commit hooky?

Git hooky jsou skripty, které Git spouští před nebo po událostech, jako jsou commit, push a receive. Konkrétně pre-commit hooky se spouštějí před dokončením commitu. Nabízejí klíčovou příležitost zkontrolovat změny, které se mají commitnout, a zabránit commitům, které nesplňují předdefinované standardy kvality. Představte si je jako strážce, kteří brání nekvalitnímu kódu ve vstupu do vaší kódové báze.

Proč používat pre-commit hooky pro kvalitu kódu v JavaScriptu?

• Včasná detekce chyb: Pre-commit hooky odhalí problémy s kvalitou kódu v rané fázi vývojového procesu, čímž zabrání jejich dalšímu šíření. To je mnohem efektivnější než objevování problémů během code review nebo, v horším případě, v produkci.
• Automatické formátování kódu: Zajistěte konzistentní styl kódu napříč celým týmem a projektem. Automatické formátování předchází debatám o stylu a přispívá k čitelnější kódové bázi.
• Snížení zátěže při code review: Automatickým vynucováním standardů kódování snižují pre-commit hooky zátěž pro revidující, což jim umožňuje soustředit se na architektonická rozhodnutí a složitou logiku.
• Zlepšená udržovatelnost kódu: Konzistentní a vysoce kvalitní kódová báze se snadněji udržuje a vyvíjí v čase.
• Vynucená konzistence: Zajišťují, že veškerý kód odpovídá standardům projektu, bez ohledu na to, který vývojář ho napsal. To je obzvláště důležité v distribuovaných týmech pracujících z různých míst – řekněme z Londýna, Tokia a Buenos Aires – kde se individuální styly kódování mohou lišit.

Klíčové nástroje pro kvalitu kódu v JavaScriptu

Několik nástrojů se běžně používá ve spojení s pre-commit hooky k automatizaci kontrol kvality kódu v JavaScriptu:

• ESLint: Výkonný linter pro JavaScript, který identifikuje potenciální chyby, vynucuje styly kódování a pomáhá zlepšit čitelnost kódu. Podporuje širokou škálu pravidel a je vysoce konfigurovatelný.
• Prettier: Názorově vyhraněný formátovač kódu, který automaticky formátuje kód tak, aby dodržoval konzistentní styl. Podporuje JavaScript, TypeScript, JSX a mnoho dalších jazyků.
• Husky: Nástroj, který usnadňuje správu Git hooků. Umožňuje definovat skripty, které se budou spouštět v různých fázích Git workflow.
• lint-staged: Nástroj, který spouští lintery a formátovače pouze na souborech ve fázi „staged“, což výrazně zrychluje proces pre-commit. Tím se zabrání zbytečným kontrolám nezměněných souborů.

Konfigurace pre-commit hooků: Průvodce krok za krokem

Zde je podrobný průvodce, jak nastavit pre-commit hooky pro váš JavaScriptový projekt pomocí Husky a lint-staged:

Krok 1: Instalace závislostí

Nejprve nainstalujte potřebné balíčky jako vývojové závislosti pomocí npm nebo yarn:

            npm install --save-dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Nebo pomocí yarn:

            yarn add --dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Krok 2: Inicializace Husky

Husky zjednodušuje proces správy Git hooků. Inicializujte jej pomocí následujícího příkazu:

            npx husky install
            

              
                Copy
              
            
          

Tím se ve vašem projektu vytvoří adresář `.husky`, který bude ukládat vaše Git hooky.

Krok 3: Konfigurace pre-commit hooku

Přidejte pre-commit hook pomocí Husky:

            npx husky add .husky/pre-commit "npx lint-staged"
            

              
                Copy
              
            
          

Tento příkaz vytvoří soubor `pre-commit` v adresáři `.husky` a přidá do něj příkaz `npx lint-staged`. To Gitu říká, aby před každým commitem spustil lint-staged.

Krok 4: Konfigurace lint-staged

lint-staged vám umožňuje spouštět lintery a formátovače pouze na souborech ve fázi „staged“, což výrazně zrychluje proces pre-commit. Vytvořte soubor `lint-staged.config.js` (nebo `lint-staged.config.mjs` pro ES moduly) v kořenovém adresáři vašeho projektu a nakonfigurujte jej následovně:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
};
            

              
                Copy
              
            
          

Tato konfigurace říká lint-staged, aby spustil ESLint a Prettier na všech „staged“ souborech JavaScriptu a TypeScriptu. Příznak `--fix` v ESLintu automaticky opraví všechny chyby lintování, které lze automaticky opravit, a příznak `--write` v Prettieru naformátuje soubory a přepíše je naformátovaným kódem.

Alternativně můžete definovat konfiguraci přímo ve vašem souboru `package.json`:

            {
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}
            

              
                Copy
              
            
          

Krok 5: Konfigurace ESLint

Pokud jste tak ještě neučinili, nakonfigurujte ESLint pro svůj projekt. Konfigurační soubor ESLintu můžete vytvořit pomocí následujícího příkazu:

            npx eslint --init
            

              
                Copy
              
            
          

Tento příkaz vás provede procesem vytvoření konfiguračního souboru ESLintu (`.eslintrc.js`, `.eslintrc.json` nebo `.eslintrc.yml`) na základě požadavků vašeho projektu. Můžete si vybrat z různých předdefinovaných konfigurací nebo si vytvořit vlastní pravidla.

Příklad `.eslintrc.js`:

            module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'react',
    '@typescript-eslint'
  ],
  rules: {
    'no-unused-vars': 'warn',
    'react/prop-types': 'off'
  }
};
            

              
                Copy
              
            
          

Tato konfigurace rozšiřuje doporučená pravidla ESLintu, doporučená pravidla Reactu, doporučená pravidla TypeScriptu a integruje se s Prettierem. Také vypíná pravidlo `react/prop-types` a nastavuje pravidlo `no-unused-vars` na varování.

Krok 6: Konfigurace Prettier

Nakonfigurujte Prettier vytvořením souboru `.prettierrc.js` (nebo `.prettierrc.json`, `.prettierrc.yml`, nebo `.prettierrc.toml`) v kořenovém adresáři vašeho projektu. Můžete si přizpůsobit možnosti formátování Prettieru tak, aby odpovídaly stylovým pokynům vašeho projektu.

Příklad `.prettierrc.js`:

            module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2
};
            

              
                Copy
              
            
          

Tato konfigurace nastavuje Prettier tak, aby používal jednoduché uvozovky, žádné středníky, koncové čárky, šířku řádku 120 znaků a šířku tabulátoru 2 mezery.

Alternativně můžete definovat konfiguraci Prettieru uvnitř `package.json`:

            {
  "prettier": {
    "semi": false,
    "trailingComma": "all",
    "singleQuote": true,
    "printWidth": 120,
    "tabWidth": 2
  }
}
            

              
                Copy
              
            
          

Krok 7: Otestování vaší konfigurace

Chcete-li otestovat vaši konfiguraci, připravte (stage) nějaké změny a pokuste se je commitnout. Například:

            git add .
            

              
                Copy
              
            
          

            git commit -m "Test pre-commit hook"
            

              
                Copy
              
            
          

Pokud se vyskytnou nějaké problémy s lintováním nebo formátováním, ESLint a Prettier je automaticky opraví (pokud je to možné) nebo nahlásí chyby. Pokud jsou nahlášeny chyby, commit bude přerušen, což vám umožní opravit problémy před dalším pokusem o commit.

Pokročilé možnosti konfigurace

Použití různých linterů a formátovačů

Můžete snadno integrovat další lintery a formátovače do vaší konfigurace pre-commit hooku. Například můžete použít Stylelint pro lintování CSS nebo SASS souborů:

            npm install --save-dev stylelint stylelint-config-standard
            

              
                Copy
              
            
          

Poté aktualizujte váš soubor `lint-staged.config.js` tak, aby zahrnoval Stylelint:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

Spouštění testů před commitem

Můžete také spouštět vaše unit testy jako součást pre-commit hooku. To pomáhá zajistit, že váš kód funguje správně, než je commitnut. Za předpokladu, že používáte Jest:

            npm install --save-dev jest
            

              
                Copy
              
            
          

Aktualizujte váš soubor `lint-staged.config.js` tak, aby zahrnoval příkaz pro testování:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write', 'jest --findRelatedTests'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

Příznak `--findRelatedTests` říká Jestu, aby spustil pouze testy, které souvisejí se změněnými soubory, což výrazně zrychluje proces.

Přeskočení pre-commit hooků

V některých případech možná budete chtít dočasně přeskočit pre-commit hooky. Můžete to udělat pomocí příznaku `--no-verify` s příkazem `git commit`:

            git commit --no-verify -m "Commit message"
            

              
                Copy
              
            
          

Obecně se však doporučuje vyhýbat se přeskakování hooků, pokud to není absolutně nutné, protože hrají klíčovou roli při udržování kvality kódu.

Řešení běžných problémů

• Hooky se nespouštějí: Ujistěte se, že je Husky správně nainstalován a inicializován a že v kořenovém adresáři vašeho projektu existuje adresář `.husky`. Také ověřte, že soubor `pre-commit` v adresáři `.husky` je spustitelný.
• Chyby lintování se neopravují: Ujistěte se, že s ESLintem je použit příznak `--fix` a že vaše konfigurace ESLintu je nastavena tak, aby automaticky opravovala určité typy chyb.
• Prettier neformátuje soubory: Ujistěte se, že s Prettierem je použit příznak `--write` a že vaše konfigurace Prettieru je správně nastavena.
• Pomalé pre-commit hooky: Použijte lint-staged k spouštění linterů a formátovačů pouze na „staged“ souborech. Zvažte také optimalizaci vašich konfigurací ESLintu a Prettieru, abyste minimalizovali počet kontrolovaných pravidel a nastavení.
• Konfliktní konfigurace: Ujistěte se, že vaše konfigurace ESLintu a Prettieru si navzájem neodporují. Pokud ano, možná budete muset upravit jednu nebo obě konfigurace, abyste konflikty vyřešili. Zvažte použití sdílené konfigurace jako `eslint-config-prettier` a `eslint-plugin-prettier`, abyste se vyhnuli konfliktům.

Osvědčené postupy pro pre-commit hooky

• Udržujte hooky rychlé: Pomalé hooky mohou výrazně ovlivnit produktivitu vývojářů. Použijte lint-staged ke zpracování pouze „staged“ souborů a optimalizujte konfigurace vašich linterů a formátovačů.
• Poskytujte jasné chybové zprávy: Když hook selže, poskytněte jasné a informativní chybové zprávy, které vývojářům pomohou problémy opravit.
• Automatizujte co nejvíce: Automatizujte formátování kódu a lintování, abyste minimalizovali manuální úsilí a zajistili konzistenci.
• Vzdělávejte svůj tým: Ujistěte se, že všichni členové týmu rozumí účelu pre-commit hooků a jak je efektivně používat.
• Používejte konzistentní konfiguraci: Udržujte konzistentní konfiguraci pro ESLint, Prettier a další nástroje napříč vaším projektem. To pomůže zajistit, že veškerý kód je formátován a lintován stejným způsobem. Zvažte použití sdíleného konfiguračního balíčku, který lze snadno instalovat a aktualizovat napříč více projekty.
• Testujte své hooky: Pravidelně testujte své pre-commit hooky, abyste se ujistili, že fungují správně a že nezpůsobují žádné neočekávané problémy.

Globální aspekty

Při práci v globálně distribuovaných týmech zvažte následující:

• Konzistentní verze nástrojů: Ujistěte se, že všichni členové týmu používají stejné verze ESLintu, Prettieru, Husky a lint-staged. Toho lze dosáhnout specifikací verzí ve vašem souboru `package.json` a použitím správce balíčků jako npm nebo yarn k instalaci závislostí.
• Kompatibilita napříč platformami: Testujte své pre-commit hooky na různých operačních systémech (Windows, macOS, Linux), abyste se ujistili, že fungují správně na všech platformách. Kdykoli je to možné, používejte nástroje a příkazy kompatibilní napříč platformami.
• Rozdíly v časových pásmech: Mějte na paměti rozdíly v časových pásmech při komunikaci s členy týmu o problémech s pre-commit hooky. Poskytněte jasné pokyny a příklady, které jim pomohou problémy rychle vyřešit.
• Podpora jazyků: Pokud váš projekt zahrnuje práci s více jazyky, ujistěte se, že vaše pre-commit hooky podporují všechny jazyky používané v projektu. Možná budete muset nainstalovat další lintery a formátovače pro každý jazyk.

Závěr

Implementace pre-commit hooků je efektivní způsob, jak vynucovat kvalitu kódu, zlepšit týmovou spolupráci a snížit náklady na údržbu v JavaScriptových projektech. Integrací nástrojů jako ESLint, Prettier, Husky a lint-staged můžete automatizovat formátování kódu, lintování a testování, čímž zajistíte, že do vašeho repozitáře bude commitován pouze vysoce kvalitní kód. Sledováním kroků uvedených v tomto průvodci můžete nastavit robustní bránu kvality kódu, která vám pomůže budovat čistší, udržitelnější a spolehlivější JavaScriptové aplikace. Osvojte si tento postup a pozvedněte vývojový proces vašeho týmu ještě dnes.